<template>
  <div class="cloud-upload">
    <div class="img_upload_wrp group">
      <label :for="id" class="img_upload_box" v-if="value.length===0 || (limit >1 && value.length <= limit)">
        <span class="img_upload_box_oper">
          <i class="add_gray"></i>
        </span>
        <input name="file" :id="id" type="file" @change="upload($event)">
      </label>
      <div class="img_upload_preview_box" v-for="(item, index) in value" :key="index">
        <img :src="item" alt="">
        <p class="img_upload_edit_area" @click="onDelete">
          <a href=" javascript:;" class=" del_gray "></a>
        </p>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
// import empty from './empty.vue'
export default {
  components: {
    // empty
  },
  props: {
    value: {
      type: [Array, Object, String]
    },
    type: {
      type: String
    },
    mode: {
      type: String,
      default: 'oss'
    },
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {

    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    id() {
      return 'cloudup' + new Date().getTime();
    }
  },
  /**
   * 页面渲染前
   * @return {[type]} [description]
   */
  created() {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  async mounted() {

  },
  methods: {
    onDelete() {
      this.$emit('input', []);
    },
    upload(event) {
      if (this.mode == 'wechat') {
        this.wx(event);
      } else {

      }
    },
    wx(event) {
      let self = this;
      let value = this.value || [];
      let limit = this.limit;
      let upload = event.target.files[0];
      let fd = new FileReader();
      fd.readAsDataURL(upload);
      fd.onload = function (e) {
        let name = upload.name;
        let file = this.result;
        let size = upload.size;
        let type = upload.type;
        self.$cloud.wechat().uploadImg(name, file, size, type).then(res => {
          if (limit > 1 && value.length <= limit) {
            value.push(res);
            self.$emit('input', value);
          } else if (limit > 1 && value.length > limit) {
            self.$emit('input', value);
          } else {
            value.push(res);
            self.$emit('input', [res]);
          }
        }).catch(error => {
          console.log('上传报错', error);
        });
      };
    }
  }
};

</script>
<style lang="less" scoped="true">
.cloud-upload {
  * {
    padding: 0;
    margin: 0;
  }

  .img_upload_wrp {
    margin-top: 5px;
    width: 582px;
  }

  .img_upload_box {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 98px;
    height: 98px;
    margin: 0 10px 10px 0;
    vertical-align: top;
  }

  .img_upload_box input {
    position: absolute;
    left: -99999px;
  }

  .img_upload_box_oper {
    display: block;
    border: 2px dotted #d9dadc;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .add_gray {
    margin-top: 40px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    display: inline-block;
    background: transparent url(https://res.wx.qq.com/mpres/htmledition/images/icon/common/icon20_add4a184f.svg) no-repeat 0 0;
    background-size: cover;
    width: 20px;
    height: 20px;
    line-height: 100px;
    overflow: hidden;
  }

  .img_upload_preview_box:hover {
    .img_upload_edit_area {
      display: block;
    }
  }

  .img_upload_preview_box {
    width: 98px;
    height: 98px;
    border: 1px solid #d9dadc;
    position: relative;
    margin: 0 10px 10px 0;
    vertical-align: top;
    display: inline-block;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }

    .img_upload_edit_area {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 25px;
      text-align: center;
      background: rgba(229, 229, 229, 0.9);
    }

    .del_gray {
      background: url(https://res.wx.qq.com//mpres/zh_CN/htmledition/comm_htmledition/style/base/base_z49d030.png) 0 -3947px no-repeat;
      width: 18px;
      height: 18px;
      vertical-align: middle;
      display: inline-block;
      line-height: 100px;
      overflow: hidden;
      text-decoration: none;
      color: #576b95;
    }
  }
}

</style>
